<template>
	<view class="home">
		<top />
		<view class="bao">
			<image class="img" src="@/static/1.png" @click="goPath('/pages/xuan/index')"></image>
			<image class="img" src="@/static/2.png"></image>
			
		</view>
		<view class="bao2">
			<image class="img2" src="@/static/3.png"></image>
			<image class="img2" src="@/static/4.png"></image>
			<image class="img2" src="@/static/5.png"></image>
			
		</view>
		<view class="party">
			<view class="list">
				<view v-for="(item, index) in list" :key="index" class="item" @click="goDetail(item)">
					<image class="left" mode="aspectFill" :src="item.coverImage" />
					<view class="right">
						<view class="top">
							<view class="title">{{ item.title }}</view>
							<view class="content">{{ item.content }}</view>
							<view class="desc">
								<u-icon name="clock" color="#333333" size="28"></u-icon>
								<text style="margin-left: 10rpx;">{{ item.createTime }}</text>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="isNoMore ? 'nomore' : 'loading'" fontSize="28" iconSize="34" />
			</view>
		</view>
	</view>
</template>

<script>
import top from './components/top.vue'
import { noticePage } from '@/api/data'
export default {
	components: {
		top,
	},
	data() {
		return {
			param: {
				pageNumber: 1,
				pageSize: 10,
				title: ''
			},
			list: [],
			isNoMore: false,

		}
	},
	onLoad() {
		this.getList('cover')
	},
	methods: {
		//滚动加载
		reachBottom() {
			if (this.isNoMore) return;
			this.param.pageNumber++;
			this.getList();
		},
		// 获取通知公告列表
		getList(status) {
			noticePage(this.param).then((res) => {
				if (res.code == '200') {
					console.log('res.data.records', res.data.records);
					res.data.records = res.data.records.map(e => {
						return {
							...e,
							coverImage: 'http://127.0.0.1:4444/api/upload/' + e.coverImage,
							createTime: uni.$u.timeFormat(res.data.createTime, "yyyy-mm-dd"),
							// content:e.content.replace(/<[^>]*>/g, '')||''
						}
					})
					if (status === "cover") {
						this.list = res.data.records;
					} else {
						this.list = [...this.list, ...res.data.records];
					}
					if (res.data.records.length < this.param.pageSize) {
						this.isNoMore = true;
					} else {
						this.isNoMore = false;
					}
				}
			})
		},
		// 跳转通知公告详情
		goDetail(item) {
			const id = item?.id;
			if (!id) return;
			uni.navigateTo({ url: `/pages/home/info?id=${id}` });
		},
		navClick(item) {
			if (item.tabBar) {
				uni.switchTab({
					url: item.url
				});
			} else {
				uni.navigateTo({
					url: item.url
				});
			}
		},
		// 选餐
		goPath(path){
			uni.navigateTo({ url: path });
		}
	}
}
</script>

<style scoped lang="scss">
.home {
	background: #f4f4f4;
	height: 100vh;
	width: 750upx;
	overflow-x: hidden;
	overflow-y: auto;
	box-sizing: border-box;
	.bao{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 40rpx;
		.img{
			width: 280upx;
			height: 220upx;
			border-radius: 20upx;
		}
	}
	.bao2{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		.img2{
			width: 200upx;
			height: 160upx;
			margin-right: 30upx;
			border-radius: 20upx;
			&:last-child{
				margin-right: 0;
			}
		}
	}

	.party {
		width: 100%;
		box-sizing: border-box;
		overflow-y: scroll;

		.list {
			width: 100%;
			padding: 0rpx 20rpx;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			margin-top: 20rpx;

			.item {
				width: 100%;
				display: flex;
				background-color: #fff;
				padding: 20rpx;
				border-radius: 30rpx;
				margin-bottom: 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				box-shadow: 0 8rpx 12rpx -4rpx rgba(0, 0, 0, 0.1), 0 8rpx 16rpx -8rpx rgba(0, 0, 0, 0.1);

				.left {
					height: 200rpx;
					border-radius: 30rpx;
					box-sizing: border-box;
					width: 30%;
				}

				.right {
					width: 70%;
					box-sizing: border-box;
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-left: 20rpx;

					.top {
						width: 100%;
						display: flex;
						flex-direction: column;

						.title {
							width: 100%;
							font-size: 30rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 15rpx;
							margin-top: 14rpx;
						}

						.content {
							width: 100%;
							font-size: 26rpx;
							color: #333;
							overflow: hidden;
							text-overflow: ellipsis;
							-webkit-line-clamp: 2;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							line-height: 45rpx;
							margin-bottom: 15rpx;
						}

						.desc {
							width: 100%;
							font-size: 26rpx;
							color: #999;
							box-sizing: border-box;
							display: flex;
							justify-content: flex-end;
							align-items: center;
						}
					}

					.line {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 24rpx;

						.join {
							font-size: 24rpx !important;
							background-color: var(--greyLight);
							color: #999;
							border-radius: 10rpx;
							line-height: 2;
							padding: 0 25rpx;
							border-top-right-radius: 20rpx !important;
							border-bottom-left-radius: 20rpx !important;
						}

						.join.comm {
							background-color: var(--projectCompareColor);
							color: #fff;
						}

						.users {
							flex: 1;
							display: flex;
							align-items: center;
						}

						.pic-group {
							display: flex;
							padding: 0 10rpx 0 0rpx;
							align-items: center;
						}

						.pic-group .pic {
							width: 48rpx !important;
							height: 48rpx !important;
							margin-left: -20rpx;
							border: 50% solid #fff;
							vertical-align: middle;

							&:first-child {
								margin-left: 0rpx;
							}
						}

						.num {
							font-size: 24rpx;
							color: #bbb;
						}
					}
				}
			}

		}
	}


}
</style>
